<template>
	<view class="body">
		<view class="header">
			<infomationVue :query="query"></infomationVue>
		</view>
		<scroll-view scroll-y="true" class="scrollView">
			<view class="comlumn_box">
				<view v-for="(item,index) in list" :key="index" class="Item" @click.stop="$ROUTELINK('physicalDeatil')">
					<view class="header">
						<view class="left">
							{{item.time}}
						</view>
						<view class="right">
							James
						</view>
					</view>
					<view class="foot">
						<view class="childItem">
							<view class="top">
								<view class="title">
									体重
								</view>
								<view class="title2">
									kg
								</view>
							</view>
							<view class="bottom">
								75.5
							</view>
						</view>
						<view class="childItem">
							<view class="top">
								<view class="title">
									身高
								</view>
								<view class="title2">
									cm
								</view>
							</view>
							<view class="bottom">
								181
							</view>
						</view>
						<view class="childItem">
							<view class="top">
								<view class="title">
									BMI
								</view>
							</view>
							<view class="bottom">
								<text>23.0</text>
								<view class="tag">
									标准
								</view>
							</view>
						</view>
						<view class="childItem">
							<view class="top">
								<view class="title">
									体脂率
								</view>
								<view class="title2">
									%
								</view>
							</view>
							<view class="bottom">
								<text>23.0</text>
								<view class="tag">
									标准
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import infomationVue from '../components/infomation.vue'
	export default{
		components:{
			infomationVue
		},
		data(){
			return{
				query:{
					img:'https://img0.baidu.com/it/u=3974459751,424647287&fm=253&fmt=auto&app=138&f=JPEG?w=398&h=389',
					name:'夕羊羊',
					sex:1,
					age:'男丨24岁 178cm 68kg',
					phone:'13216193357',
					shop:'温州中庚漫游天地店',
					time:'2024-09-24',
					remark:'天天来，夕总',
				},
				list:[
					{
						time:'2024-09-24 14:15:15',
						name:'James',
						tizhong:'75.5',
						shengao:'181',
						BMI:'23.0',
						tizhi:'20.5'
					},{
						time:'2024-09-24 14:15:15',
						name:'James',
						tizhong:'75.5',
						shengao:'181',
						BMI:'23.0',
						tizhi:'20.5'
					},
					{
						time:'2024-09-24 14:15:15',
						name:'James',
						tizhong:'75.5',
						shengao:'181',
						BMI:'23.0',
						tizhi:'20.5'
					}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #e9e9e9;
	}
	.body{
		display: flex;
		flex-direction: column;
		align-items: center;
		.scrollView{
			height: 88vh;
			.comlumn_box{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 20rpx;
				.Item{
					width: 702rpx;
					background: #73F0EA;
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20rpx;
					.header{
						width: 100%;
						height: 72rpx;
						padding: 0 32rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #ffffff;
						.left{
							flex: 1;
						}
						.right{
							
						}
					}
					.foot{
						width: 702rpx;
						height: 156rpx;
						background: linear-gradient(180deg,#e1f3f1, #ffffff);
						border:1rpx solid #73F0EA;
						border-radius: 32rpx;
						padding: 36rpx 32rpx 0;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.childItem{
							display: flex;
							flex-direction: column;
							.top{
								display: flex;
								flex-direction: row;
								align-items: baseline;
								margin-bottom: 4rpx;
								.title{
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC-Bold;
									font-weight: 700;
									text-align: left;
									color: #666666;
									margin-right: 8rpx;
								}
								.title2{
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC-Medium;
									font-weight: 500;
									text-align: left;
									color: #b6b6b6;
								}
							}
							.bottom{
								display: flex;
								flex-direction: row;
								align-items: center;
								font-size: 40rpx;
								font-family: DIN, DIN-Bold;
								font-weight: 700;
								text-align: left;
								color: #333333;
								.tag{
									margin-left: 8rpx;
									width: 48rpx;
									height: 28rpx;
									background: #47cc88;
									border: 2rpx solid rgba(0,0,0,0.00);
									border-radius: 8rpx;
									font-size: 20rpx;
									font-family: PingFang SC, PingFang SC-Bold;
									font-weight: 700;
									text-align: left;
									color: #ffffff;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
			}
		}
	}
</style>